<template>
  <div class="main-wrapper">
    <!-- 搜索区 -->
    <div class="search-bar flex-row flex-center">
      <div class="title">消息列表</div>
      <div class="clear" @click="async() => {await setAllMessageAsRead()}">
        <a-button shape="circle">
          <template #icon>
            <img src="@/assets/icons/clear.png" />
          </template>
        </a-button>
      </div>
      <div class="operation"></div>
    </div>

    <!-- 表单区 -->
    <div class="main-table-area">
      <a-table
        :columns="columns"
        :data-source="messageList"
        :pagination="false"
        style="width: 100%"
        >
        <template #headerCell="{ column }">
          <span> {{ column.title }} </span>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'content'">
            <a :class="['grey-text', record.readStatus!==1 ? 'unread' : '']" @click="openMessage(record)">
              {{ extractTextFromMessage(record.content) }}
            </a>
          </template>
          <template v-else-if="column.key === 'sendTime'">
            <span>
              {{ record.sendTime }}
            </span>
          </template>
          <template v-else-if="column.key === 'readStatus'">
            <span>
              {{ record.readStatus===1 ? '已读' : '未读' }}
            </span>
          </template>
          <template v-else-if="column.key === 'action'">
            <span>
              <a v-if="record.readStatus!==1" @click="async() => {await setMessageAsRead(record.id)}">设为已读</a>
              <a-divider v-if="record.readStatus!==1" type="vertical" />
              <a-popconfirm
                :title="`确定要删除吗？`"
                @confirm="async() => {await doDelete(record.id)}"
              >
                <a class="grey-text">删除</a>
              </a-popconfirm>
            </span>
          </template>
        </template>

        <template #emptyText>
          <div class="empty-box">
            <div class="empty-body">
              <img src="@/assets/images/empty-message.png" style="width: 100%; height: 100%;" />
            </div>
          </div>
        </template>
      </a-table>
    </div>

    <div v-if="totalRecords>pageSize" class="main-table-pagination flex-row flex-center">
      <a-pagination 
        v-model:current="currentPage"
        v-model:pageSize="pageSize"
        :total="totalRecords"
        @change="storeMessage.handlePageChange"
        show-less-items />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onBeforeMount } from "vue";
import { useNavigation } from "@utils/navigation";
import useMessageStore from "@/stores/message";
import { miscApi } from "@/services";

const { navigateTo } = useNavigation();

const messageList = ref([]);
const columns = [
  {
    title: "消息内容",
    dataIndex: "content",
    key: "content",
    width: "55%",
  },
  {
    title: "发送时间",
    dataIndex: "sendTime",
    key: "sendTime",
    width: "20%",
  },
  {
    title: "状态",
    dataIndex: "readStatus",
    key: "readStatus",
    width: "10%",
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    width: "15%",
  },
];

const storeMessage = useMessageStore();
const currentPage = ref<number>(storeMessage.pageNum);
const pageSize = ref<number>(storeMessage.pageSize);
const totalRecords = ref<number>(storeMessage.totalRecords);
onBeforeMount(async () => {
  await storeMessage.initData();

  messageList.value = storeMessage.messageSource;

  await miscApi.traceViewPage("/message/list");
});

const openMessage = async (record: any) => {
  // 设置为已读
  if (record.readStatus !== 1) {
    await storeMessage.setMessageAsRead(record.id);

    messageList.value = storeMessage.messageSource;
  }

  // 缓存消息详情
  localStorage.setItem("messageDetail", JSON.stringify(record));

  // 跳转到详情页
  navigateTo('/message/detail');
};

const setAllMessageAsRead = async () => {
  await storeMessage.setAllAsRead();

  messageList.value = storeMessage.messageSource;
}

const setMessageAsRead = async (id) => {
  await storeMessage.setMessageAsRead(id);

  messageList.value = storeMessage.messageSource;
}

const doDelete = async (id) => {
  await storeMessage.handleDelete(id);

  messageList.value = storeMessage.messageSource;
}

const extractTextFromMessage = (message) => {
  if (!message) return '';
  
  // 直接移除所有HTML标签
  return message.replace(/<[^>]*>/g, '');
}
</script>

<style lang="less" scoped>
.main-wrapper {
  display: flex;
  margin: 20px 30px;
  flex-direction: column;
  background-color: @white-bg;
  border-radius: 20px;

  .search-bar {
    width: 100%;

    .title {
      height: 24px;
      line-height: 24px;
      font-size: 20px;
      font-weight: 500;
      color: @font-black;
    }

    .clear {
      margin-left: 10px;
    }

    .operation {
      flex: 1;
    }

    :deep(.ant-btn) {
      height: 24px;
      padding: 3px;

      &.ant-btn-default {
        background-color: @pink-table-hd;
        border-color: @pink-table-hd;
      }

      &.ant-btn-circle {
        min-width: 24px;
      }

      &.ant-btn-icon-only {
        width: 24px;
      }
    }
  }

  .custom-table {
    background-color: @pink-table-hd; /* 粉色背景颜色 */
    width: 100%;
  }

  .pagination-bar {
    display: flex;
    align-items: center;
    margin: 10px;
    border-spacing: 10px;
  }

  .main-table-area {
    margin-top: 20px;
    width: 100%;

    .empty-box {
      height: calc(100vh - 285px);
      display: flex;
      flex-direction: column;
      align-items: center;

      .empty-body {
        width: 510px;
        height: 309px;
        margin-top: 120px;
        position: relative;
        display: flex;
        justify-content: center;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    :deep(.grey-text) {
      color: @font-grey-light;

      &.unread {
        color: @font-black;
        font-weight: 500;
      }
    }
  }

  .main-table-pagination {
    width: 100%;
    padding: 30px 20px 50px 20px;
  }
}

:deep(.ant-table-wrapper) {
  .ant-table-thead >tr>th {
    color: @font-black;
    background-color: @pink-table-hd;
  }

  .ant-table {
    color: #666666;
    border-radius: 20px 20px 0 0;
  }

  .ant-table-container {
    border-start-start-radius: 20px;
    border-start-end-radius: 20px;

    table>thead>tr:first-child >*:first-child {
      border-start-start-radius: 20px;
    }

    table>thead>tr:first-child >*:last-child {
      border-start-end-radius: 20px;
    }
  }
}

:deep(.ant-pagination) {
  .ant-pagination-item {
    min-width: 44px;
    height: 44px;
    margin-inline-end: 10px;
    line-height: 44px;
    background-color: @white;
    border: 1px solid @border-red-light;
    border-radius: 50%;

    a {
      font-size: 14px;
      font-weight: 400;
    }

    &.ant-pagination-item-active {
      border: 1px solid #ED171F;
    }
  }
  .ant-pagination-prev, .ant-pagination-next, .ant-pagination-jump-prev, .ant-pagination-jump-next {
    min-width: 44px;
    height: 44px;
    color: @font-black;
    line-height: 44px;
    border: 1px solid @border-red-light;
    border-radius: 50%;
    margin-inline-end: 10px;

    a {
      font-size: 14px;
      font-weight: 400;
      border-radius: 50%;
    }
  }

  .ant-pagination-prev:hover .ant-pagination-item-link, .ant-pagination-next:hover .ant-pagination-item-link {
    background-color: rgba(0, 0, 0, 0.06);
  }

  .ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link {
    border-radius: 50%;
  }

  .ant-pagination-options {
    display: none;
  }
}
</style>
